<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>组合框</title>
    <script type="text/javascript" src="../easyui-config.js"></script>
</head>
<body>
    <div class="easyui-panel" style="width:600px;height:300px;">
        <select id="combobox" class="easyui-combobox" label="手机品牌:" labelPosition="left" style="min-width:240px;max-height:60px;">
            <option value="1">Apple</option>
            <option value="2">vivo</option>
            <option value="3" selected>oppo</option>
        </select>
        <div>
            <div class="easyui-linkbutton" text="setValue" onclick="setComboboxValue()"></div>
            <div class="easyui-linkbutton" text="getValue" onclick="let value = $('#combobox').combobox('getValue'); showTip(value)"></div>
            <div class="easyui-linkbutton" text="options" onclick="let options = $('#combobox').combobox('options'); showTip(JSON.stringify(options))"></div>
            <div class="easyui-linkbutton" text="getData" onclick="let getData = $('#combobox').combobox('getData'); showTip(JSON.stringify(getData))"></div>
            <div class="easyui-linkbutton" text="loadData" onclick="let loadData = $('#combobox').combobox('loadData',data1);"></div>
            <div class="easyui-linkbutton" text="reload" onclick="let reload = $('#combobox').combobox('reload');"></div>
            <div class="easyui-linkbutton" text="reload" onclick="let reload = $('#combobox').combobox('reload','http://www.baidu.com');"></div>
            <div class="easyui-linkbutton" text="setValue" onclick="let setValue = $('#combobox').combobox('setValue',9);"></div>
            <div class="easyui-linkbutton" text="setValues" onclick="let setValues = $('#combobox').combobox('setValues',['11','22','33']);"></div>
            <div class="easyui-linkbutton" text="clear" onclick="let clear = $('#combobox').combobox('clear');"></div>
            <div class="easyui-linkbutton" text="select" onclick="let select = $('#combobox').combobox('select','Apple');"></div>
            <div class="easyui-linkbutton" text="unselect" onclick="let unselect = $('#combobox').combobox('unselect','Apple');showTip('从文本框中清除指定的选项');"></div>
            <div class="easyui-linkbutton" text="disable" onclick="let disable = $('#combobox').combobox('disable');"></div>
            <div class="easyui-linkbutton" text="enable" onclick="let enable = $('#combobox').combobox('enable');"></div>
        </div>
    </div>


    <script>
        function showTip(msg) {
            console.log(msg);
            $.messager.tip({
                msg: msg,
                icon: 'info',
                timeout: 2000
            });
        }
        function setComboboxValue() {
            $.messager.prompt("提示", "请输入需要修改的值:", function (value) {
                if (value) {
                    $("#combobox").combobox("setValue", value);
                }
            });
        }
    </script>

    <div class="easyui-panel" style="width:600px;height:300px;">
        <input id="combobox1" />

        <input class="easyui-combobox" id="combobox2" data-options="valueField:'id',textField:'text',data:data2,
			onSelect:function(rec){
				var url = 'get_data2.php?id='+rec.id;
				$('#combobox2').combobox('reload', rec);
			}" />
        <script>
            var data1 = [
                {
                    "id": 1,
                    "text": "Apple",
                    "group": "phone",
                    "iconCls": 'icon-cancel'
                },
                {
                    "id": 2,
                    "text": "oppo",
                    "group": "phone",
                    "iconCls": "icon-add"
                },
                {
                    "id": 3,
                    "text": "vivo",
                    "selected": true,
                    "group": "phone",
                    "iconCls": "icon-remove"
                },
                {
                    "id": 4,
                    "text": "Sun",
                    "group": "phone",
                    "iconCls": "icon-save"
                },
                {
                    "id": 5,
                    "text": "Xiaomi",
                    "group": "phone",
                    "iconCls": "icon-cancel"
                },
                {
                    "id": 6,
                    "text": "dell",
                    "group": "notebook",
                    "iconCls": "icon-undo"
                },
                {
                    "id": 7,
                    "text": "Xiaomi",
                    "group": "notebook"
                },
                {
                    "id": 8,
                    "text": "micro",
                    "group": "notebook",
                    "iconCls": "icon-redo"
                }
            ];
            var data2 = [{ "id": 1, "text": "text1" }, { "id": 2, "text": "text2" }, { "id": 3, "text": "text3", "selected": true }, { "id": 4, "text": "text4" }, { "id": 5, "text": "text5" }];

            $("#combobox1").combobox({
                textField: "text"
                , valueField: "id"
                , data: data1
                , value: [1, 2, 5]
                , groupField: "group"
                , groupFormatter: function (group) {
                    return '<span style="color:red">' + group + '</span>';
                }
                , mode: 'local' /* local remote */
                , url: null
                , method: 'post'
                , queryParams: {} /* query String */
                , limitToList: true
                , showItemIcon: true /* 在文本框中显示选定项的图标 */
                , groupPosition: 'sticky' /* 'static' and 'sticky'. */
                , width: 200
                , panelWidth: 200
                , panelHeight: 'auto'
                , label: "Product:"
                , labelPosition: "top"
                , icons: [{ iconCls: 'icon-add' }, { iconCls: 'icon-cut' }]
                , iconWidth: 20
                , multiple: true
                , multiline: true
                , selectOnNavigation: $(this).is(':checked')
                , filter: function (q, row) {
                    var opts = $(this).combobox('options');
                    return row[opts.textField].indexOf(q) == 0;
                }
                , formatter: function (row) {
                    var opts = $(this).combobox('options');

                    return '<span style="font-weight:bold">' + row.text + '</span><br/>' +
                        '<span style="color:#888">' + row.desc + '</span>';
                }
                , loader: function (param, success, error) {
                    var bsuccess = false;
                    var data = [];
                    if (bsuccess) {
                        success(data);
                    }
                }
                , loadFilter: function (data) {
                    return data;
                }

                , onBeforeLoad: function (params) {
                    params.id = 2;
                    params.language = 'js';
                    showTip(JSON.stringify(params));
                }
                , onLoadSuccess: function () {
                    showTip("加载成功");
                }
                , onLoadError: function () {
                    showTip("加载失败");
                }
                , onChange: function (newValue, oldValue) {

                }
                , onClick: function (record) {

                }
                , onSelect: function (record) {
                    showTip(JSON.stringify(record));
                }
                , onUnselect: function (record) {
                    showTip(JSON.stringify(record));
                }
            });
        </script>
    </div>

</body>
</html>